<template>
    <div class="class_message">
      <div class="class_img">
        <el-card style="width: 100%;height: 100%;border: solid lightblue;background: honeydew">
        <el-carousel trigger="click" height="200px"interval="4000"  >
          <el-carousel-item v-for="item in imageList" :key="item.id">
              <!--    <h3 class="small">{{ item }}</h3>-->
              <img :src="item.idView" class="image" style="height: 100%" width="100%">
          </el-carousel-item>
        </el-carousel>
        </el-card>
      </div>

      <div class="class_about">
            <div class="class_about_1">
              <el-card style="width: 100%;height: 100%;border: solid lightblue">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item title="一致性 Consistency" name="1">
                  <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                  <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                </el-collapse-item>
                <el-collapse-item title="反馈性 Feedback" name="2">
                  <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                  <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                </el-collapse-item>
                <el-collapse-item title="效率性 Efficiency" name="3">
                  <div>简化流程：设计简洁直观的操作流程；</div>
                  <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                  <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                </el-collapse-item>
                <el-collapse-item title="可控性 Controllability" name="4">
                  <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                  <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                </el-collapse-item>
              </el-collapse>
              </el-card>
            </div>
            <div class="class_about_2">
              <el-card  shadow="hover" style="height: 100%;width: 100%;border:  solid lightblue ">
              <p align="center"><icon class="el-icon-message-solid"></icon> 公告</p>

              <el-tree :data="data_list" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              </el-card>
            </div>
      </div>

<!--      <div class="class_work">-->
<!--            <div class="class_work_left">-->

<!--              <div class="class_work_left_1">-->

<!--                  <icon class="fa fa-group"></icon>加入我们！！<br>-->
<!--                  <p >QQ:1008611</p>-->
<!--                  <p ><icon class=""></icon>10086@qq.com</p>-->

<!--              </div>-->
<!--              <div class="class_work_left_2">-->

<!--                  <icon class="fa fa-commenting"></icon>问题反馈！！-->

<!--              </div>-->
<!--              <div class="class_work_left_3">-->

<!--                <icon class="fa fa-handshake-o"></icon>商务合作！！-->

<!--              </div>-->
<!--             -->
<!--            </div>-->

<!--            <div class="class_work_right">-->
<!--             <el-card style="width: 100%;height: 100%">-->
<!--              <el-progress type="circle" :percentage="25" ></el-progress>-->
<!--              <el-progress type="circle" :percentage="100" status="success"></el-progress>-->
<!--              <el-progress type="circle" :percentage="70" status="warning"></el-progress>-->
<!--              <el-progress type="circle" :percentage="50" status="exception"></el-progress>-->
<!--             </el-card>-->
<!--            </div>-->
<!--      </div>-->
<!--      <div class="class_foot">-->

<!--      </div>-->
    </div>
</template>

<script>
  export default {
    name: "Employee",
    data(){
      return{
          activeName: '1',
          imageList:[
            { id:0,idView:require('@/assets/hdc2021.png')},
            { id:1,idView:require('@/assets/2.jpg')},
            { id:2,idView:require('@/assets/3.1.jpg')},
            { id:3,idView:require('@/assets/4.png')}
          ],
        data_list: [{
          label: '2.1版本强更通知',
          children: [{
            label: '更新时间-2999/12/31'
          }]
        }, {
          label: '最新新闻',
          children: [{
            label: '某偷国国民因窃取室友内裤而被判刑而被...',
          }, {
            label: '点我查看好康视频',
            children: [{
              label: '珈薇❤：1008611'
            }]
          }]
        }],
        defaultProps:{
            children:'children',
           label:'label'
        }
      }
    },methods:{
            handleNodeClick(data_list){
              console.log(data_list)
            }
    },
    mounted() {
    }
  }
</script>


<style scoped>
  .class_message{
      margin:20px 15px 20px 15px;
  }

  .class_img{
    width: 100%;
    height: 100%;
  }
  .class_about{
    margin-top: 20px;
    width: 100%;
    height: 300px;
  }
  .class_about_1{
    width: 58%;
    float: left;
    height: 300px;

  }
  .class_about_2{
    width: 38%;
    float: right;
    height: 300px;

  }

  /*单页偶数页背景*/
  .el-carousel__item:nth-child(2n) {
    background-color: white;
  }

  .class_work{
    margin-top: 20px;
    width: 100%;
    height: 300px;
  }
  .class_work_left{
    width: 25%;
    height: 100%;
    float: left;

  }
   .class_work_left_1{
      width: 100%;
      height: 33%;
      float: left;
      border:solid black;
    }
  .class_work_left_2{
    width: 100%;
    height: 33%;
    float: left;
    border:solid black;
  }
  .class_work_left_3{
    width: 100%;
    height: 34%;
    float: left;
    border: solid black;
  }

  .class_work_right{
    width: 70%;
    height: 100%;
    float: right;
    border: 2px solid red;
  }
  .class_foot{
    margin-top: 20px;
    width: 100%;
    height: 100px;
    border:  1px solid black;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: white;
  }



</style>
